<template>
	<view class="">
		<view class="all">
			<view class="appraise-pic">
				<!-- <image class="show-image" mode="aspectFit" :src="src"></image> -->

				<view class="appraise-pic-item">
					<image @click="pic" v-if="src.length == 0" class="show-image" mode="aspectFit" src="../../static/拍照.png">
					</image>
					<view class="item" style="" v-else v-for="(item,index) in src" :key="index" @click="preview">
						<!-- <view class="item" style="" v-else v-for="(item,index) in src" :key="index"  @click="edit(item)"> -->
						<image class="show-image" mode="aspectFit" :src="item"></image>
					</view>
				</view>
				<view class="text" @click="pic">
					添加图片
				</view>

			</view>

		</view>
		<view class="appraise-mid">
			<view class="u-page__tag-item" v-for="(item, index) in checkboxs" :key="index">
				<u-tag shape="circle" :text="item.item" :plain="!item.checked" type="warning" :name="index"
					@click="checkboxClick" borderColor="#cccccc" :plainFill="false" color="#000">
				</u-tag>
			</view>
		</view>
		<view class="appraise-middles">
			<u--textarea v-model="value2" placeholder="展开说说对商品得想法把……" count height='100'></u--textarea>
		</view>
		<view class="">
			<u-collapse accordion>
				<u-collapse-item title="综合评价">
					<view class="appraise-evals">
						<text>物流服务：</text> <u-rate :count="count" v-model="value"></u-rate>
					</view>
					<view class="appraise-evals">
						<text>服务态度：</text> <u-rate :count="count" v-model="value1"></u-rate>
					</view>
					<view class="appraise-evals">
						<text>商品质量：</text> <u-rate :count="count" v-model="value4"></u-rate>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="appraise-bnt">
			<view class="anonymous">
				<u-checkbox-group shape="circle" placement="column">
					<u-checkbox label="匿名" :checked="checked" @change="checkbox" name="匿名">
					</u-checkbox>
				</u-checkbox-group>
				<view class="textanonymous">
					匿名会隐藏头像和用户名
				</view>
			</view>

			<view class="publish">
				<u-button text="发布" shape="circle" size="large" color="#fed2bd" @click="publish"></u-button>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				src: [],

				checkboxs: [{
						checked: true,
						item: "新鲜度"
					},
					{
						checked: false,
						item: "包装品质"
					},
					{
						checked: false,
						item: "商品分量"
					},

					{
						checked: false,
						item: "其他"
					}
				],
				value2: '',
				count: 6,
				value: 0,
				value1: 0,
				value4: 0,
				checked: false,
				goodItem: {}
			}
		},
		onLoad(option) {
			this.goodItem = JSON.parse(option.good)
uni.$setNavigationBarColor()
		},
		methods: {
			...mapMutations("rechargeComments", ["addAppraise"]),
			//是否匿名
			checkbox() {
				this.checked = !this.checked
			},
			radioClick(name) {
				this.radios.map((item, index) => {
					item.checked = index === name ? true : false
				})
			},
			checkboxClick(name) {
				this.checkboxs[name].checked = !this.checkboxs[name].checked
			},
			//添加照片
			pic() {
				if (this.src.length < 5) {
					var _this = this
					wx.chooseImage({
						count: 5, // 最多可以选择的图片张数，默认9
						sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
						sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
						success: (res) => {
							this.src = [...this.src, ...res.tempFilePaths]

						},
					})
				} else {
					uni.$showToast("最多五张照片", "error")
				}
			},
			//发布
			publish() {
				if (this.value2.length == 0) {
					return uni.$showToast("评价不能为空", "error")
				}else if(this.value == 0 && this.value1 == 0 && this.value4 == 0){
						return uni.$showToast("综合评价不能为空", "error")
				}
				//星星评价
				let add = this.value + this.value1 + this.value4
				let value = 1
				if (add > 0 && add <= 4) {
					value = 1
				} else if (add > 4 && add < 10) {
					value = 2
				} else if (add >= 10 && add < 13) {
					value = 3
				} else if (add >= 13 && add < 17) {
					value = 4
				} else {
					value = 5
				}


				this.addAppraise({
					src: this.src,
					rate: value,
					anonymity: this.checked,
					eval: this.value2,
					goodItem: this.goodItem
				})
				uni.redirectTo({
					url: "/subCustomer/myEval/myEval"
				})
			},
			//预览图片
			preview() {
				uni.previewImage({
					current: this.src[0], // 当前显示图片的http链接
					urls: this.src // 需要预览的图片http链接列表
				})
			},
			// 编辑图片
			// edit(item){
			// 	console.log(item,"item")
			// 	uni.editImage({
			// 	  src: item, // 图片路径
			// 	})
			// }
		},
	}
</script>

<style lang="scss">
	.appraise-bnt {
		position: absolute;
		bottom: 30px;
		right: 0;
		left: 0;
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.anonymous {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.textanonymous {
			font-size: 13px;
			color: #b1b1b1;
		}

		.publish {
			width: 35%;
		}
	}

	.appraise-evals {
		display: flex;
		width: 90%;
		justify-content: start;
		margin: 0 auto;
	}

	.appraise-middles {
		width: 90%;
		margin: 20px auto;

	}

	.appraise-mid {
		margin: 20px auto;
		width: 90%;
		display: flex;
		justify-content: center;
		align-items: center;

		.u-page__tag-item {
			display: flex;
			justify-content: center;
			align-items: center;

			margin-right: 20px;
			width: 100px;
		}
	}


	.all {
		background-color: #f7f0f8;
		height: 160px;

		.appraise-pic {
			width: 90%;
			background-color: white;
			border-radius: 20px;
			margin: 0 auto;
			overflow: hidden;

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 150px;

			.appraise-pic-item {
				display: flex;

				.item {
					margin-left: 10px;
				}
			}

			image {
				width: 50px;
				height: 50px;
				margin-bottom: 10px;
			}

			.text {
				font-size: 16px;
				font-weight: 700;
			}
		}
	}
</style>